<template>
  <button
    class="tn-button tn-clear-button-style"
    :class="[buttonClass]"
    :style="buttonStyle"
    :hover-class="hoverClass"
    :loading="loading"
    :disabled="disabled"
    :form-type="formType"
    :open-type="openType"
    :app-parameter="appParameter"
    :session-from="sessionFrom"
    :send-message-title="sendMessageTitle"
    :send-message-path="sendMessagePath"
    :send-message-img="sendMessageImg"
    :show-message-card="showMessageCard"
    @tap.stop="handleClick"
    @getphonenumber="handleGetPhoneNumber"
    @error="handleError"
    @opensetting="handleOpenSetting"
    @launchapp="handleLaunchApp"
    @chooseavatar="handleChooseAvatar"
  >
    <slot></slot>
  </button>
</template>

<script lang="ts" setup>
import { buttonProps, buttonEmits, GetPhoneNumber } from '../../../types/tn-button'
import { computed, watchEffect, CSSProperties } from 'vue'
import { ColorInfo } from '../../../types/tuniao-ui'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit, throttle } from '../../../utils'

const props = defineProps(buttonProps)
const emits = defineEmits(buttonEmits)

const { generateColorInfo, splitColorInfo } = useComponentColor()
let componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
// 监听颜色变化实时修改颜色对应的属性
watchEffect(() => {
  componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
})

// 解析边框颜色
const borderColor = computed<ColorInfo>(() => {
  return splitColorInfo('border', props?.borderColor || '')
})
// 解析阴影颜色
const shadowColor = computed<ColorInfo>(() => {
  return splitColorInfo('shadow', props?.shadowColor || '')
})

// 按钮样式
const buttonStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (props?.width) {
    style.width = handleValueWithUnit(props.width)
  }
  if (props?.height) {
    style.height = handleValueWithUnit(props.height)
  }
  // 如果当前设置的形状是圆形则宽度就是高度
  if (props?.shape === 'circle' && !!style.width) {
    style.height = style.width
  }

  if (props?.fontSize) {
    style.fontSize = handleValueWithUnit(props.fontSize)
  }
  if (componentColorInfo.style?.color) {
    style.color = componentColorInfo.style.color
  }

  // 如果不是镂空才进行背景颜色的设置
  if (!props?.plain && componentColorInfo.style?.backgroundColor) {
    style.backgroundColor = componentColorInfo.style.backgroundColor
  }
  if (props?.plain && borderColor.value.type === 'style') {
    style.borderColor = borderColor.value.value
  }
  if (props?.shadow && shadowColor.value.type === 'style') {
    style.boxShadow = `6rpx 6rpx 8rpx ${shadowColor.value.value}`
  }


  return Object.assign(style, props.customStyle || {})
})

// 按钮类
const buttonClass = computed<string>(() => {
  let clazz: string[] = []
  if (componentColorInfo.class.length > 0) {
    clazz.push(...componentColorInfo.class)
  }
  if (props?.fontBold) {
    clazz.push('tn-text-bold')
  }

  // 设置默认size
  if (props?.size) {
    clazz.push(`tn-button--${props.size}`)
  }
  // 设置默认type
  if (props?.type) {
    clazz.push(`tn-type-${props.type}`)
  }
  // 设置形状
  if (props?.shape) {
    clazz.push(`tn-button--${props.shape}`)
  }
  // 设置阴影
  if (props?.shadow) {
    clazz.push('tn-shadow')
    if (shadowColor.value.type === 'class') {
      clazz.push(shadowColor.value.value)
    }
  }
  // 设置镂空状态
  if (props?.plain) {
    clazz.push('tn-button--plain')
    if (props?.border) {
      clazz.push('tn-border')
      if (props?.borderBold) {
        clazz.push('tn-border-bold')
      }
      if (borderColor.value.type === 'class') {
        clazz.push(borderColor.value.value)
      }
    }
  }

  return clazz.join(' ')
})

// 事件处理
// 点击事件
const handleClick = () => {
  if (props?.disabled || props?.loading) return
  if (props.blockRepeatClick) {
    throttle(() => {
      emits('click', props.index)
    }, 300, true)
  } else {
    emits('click', props.index)
  }
}
// 获取用户手机号回调
const handleGetPhoneNumber = (e: GetPhoneNumber) => {
  emits('getphonenumber', e)
}
// 处理开放能力获取错误
const handleError = (e: any) => {
  emits('error', e)
}
// 打开授权设置并关闭后回调
const handleOpenSetting = (e: any) => {
  emits('opensetting', e)
}
// 小程序打开App成功回调
const handleLaunchApp = (e: any) => {
  emits('launchapp', e)
}
// 获取用户头像信息
const handleChooseAvatar = (e: any) => {
  emits('chooseavatar', e)
}
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';
.tn-button {
  position: relative;
  line-height: 1em;
  width: fit-content;
  background-color: $tn-main-color;
  color: #FFFFFF;
  font-size: $tn-font-size;
  margin: 0;
  padding: 10rpx 14rpx;
  border-radius: 10rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 形状 start */
  &--round {
    border-radius: 1000rpx;
    padding: 10rpx 16rpx;
  }
  &--circle {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    padding: 0;
  }
  /* 形状 end */

  /* 内置size start */
  &--sm {
    font-size: 20rpx;
    padding: 6rpx 8rpx;
    border-radius: 6rpx;
  }
  &--sm.tn-button--round {
    padding: 6rpx 12rpx;
    border-radius: 20rpx;
  }
  &--sm.tn-button--circle {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
  }
  &--lg {
    font-size: 34rpx;
    padding: 12rpx 18rpx;
  }
  &--lg.tn-button--round {
    padding: 12rpx 18rpx;
  }
  &--lg.tn-button--circle {
    width: 80rpx;
    height: 80rpx;
  }
  &--xl {
    font-size: 40rpx;
    padding: 16rpx 24rpx;
  }
  &--xl.tn-button--round {
    padding: 16rpx 24rpx;
  }
  &--xl.tn-button--circle {
    width: 100rpx;
    height: 100rpx;
  }
  /* 内置size end */

  &--plain {
    background-color: transparent !important;
    background-image: none;
    color: $tn-font-color;
  }
}
</style>
